<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>btn1</button>
    <button>btn2</button>
    <button>btn3</button>
    <br>
    <button>计算</button>
    <input type="text" name="" id="number">
</body>
    <script>
        var btns = document.getElementsByTagName("button")
        /*
        fun1: 
            for(var i=0;i<btns.length;i++){
                var btn = btns[i]
                btn.index = i
                btn.onclick = function(){
                    alert("this is " + (this.index+1) + "th btn")
                }
            } 
        */
        /* 
        fun2:
            for(var i=0;i<btns.length;i++){
                (function(i){
                    var btn = btns[i]
                    btn.onclick = function(){
                        alert("this is " + (i+1) + "th btn")
                    }
                })(i)
            }
        */
        /* fun3: */
        for(let i=0;i<btns.length;i++){
            var btn = btns[i]
            btn.onclick = function(){
                alert("this is " + (i+1) + "th btn")
            }
        } 


        function fn1() {
            var a = 2
            function fun2() {
                a++
                console.log(a)
            }
            return fun2
        }
        var f = fn1()
        console.log(f)
        f();



        (function myModule2(window){
            var msg = 'my msg'
            function doSome(){
                console.log("do some for " + msg)
            }
            function doOther(){
                console.log("do other for " + msg)
            };
            window.myModule2 = {
                doSome, doOther
            } 
        })(window)

        var f2 = window.myModule2
        f2.doOther()
        f2.doSome()



                
        var name = 'the window'
        var obj1 = {
            name: 'obj1 name',
            getName: function(){
                return function() {
                    return this.name 
                }
            }
        }
        console.log(obj1.getName()())  // the window

        setTimeout(function(){
            console.log("timeout 1000")
            
        },1000)
        setTimeout(function(){
            console.log("timeout 2000")
        },2000)
        setTimeout(function(){
            console.log("timeout 0000")
        },0)
        function fn(){
            console.log("fn()")
        }
        fn()
        // console.log('before alert')
        // alert("alert")
        // console.log("after alert")

        var num = document.getElementById("number")
        function fab(n){
            var a = 1
            var b = 1
            var c = 1
            for(let i=3;i<=n;i++){
                c = a + b
                a = b
                b = c
            }
            return c
        }
        var btns = document.getElementsByTagName("button")
        btns[3].onclick = function(){
            var v = parseInt(num.value)
            var worker = new Worker('worker.js')
            worker.onmessage = function(event){
                console.log('主进程接收分进程返回的数据:' + event.data)
                alert(event.data)
            }
            worker.postMessage(v)
            console.log('主线程向分线程发送数据:' + v)
            // num.value = fab(v)
            // alert(num.value)
        }
    </script>
</html>